
function move(eleNode,target,attr,index){
    var iNow = parseInt($(eleNode).css(attr));
    var speed = (target - iNow);
    iNow +=speed;
    $(eleNode).css(attr,iNow + "px");
    $(eleNode).children().css("opacity","0");
    $(eleNode).children().eq(index).animate({opacity:"1"},1000);
}

class Slider{
    constructor(selector){
        this.selector = selector;
        this.init(this.selector);
    }
    init(selector){
        this.bannerContainer = $(selector);
        this.btnContainer=$('.ck-slidebox');
        this.bannerList = this.bannerContainer.children();
        this.btn=$(".dot-wrap").children();
        this.length = this.bannerList.length;
        this.index = 0;
        this.autoTimer = null;
        this.bindEvent();
        this.autoPlay();
    }
    bindEvent(){
        $(".ck-prev").unbind('click').click(this.toPrev.bind(this,this.index));
        $(".ck-next").unbind('click').click(this.toNext.bind(this,this.index));

        //鼠标放在li上时停止轮播
        this.bannerContainer.mouseenter((event)=>{
            clearInterval(this.autoTimer);
        })
        this.bannerContainer.mouseleave(()=>{
           this.autoPlay();
        })
        //鼠标在按钮上时相对应的li展示
        this.btnContainer.on("mouseenter","li",this.toIndex);
        this.btnContainer.on("mouseleave","li",this.goNext);
    }
    toIndex(){
       var index=$(this).attr("index");
       $(this).css("background","#fff");
    }
    goNext(){
        $(this).css("background","rgba(0,0,0,0.1)");
    }
    autoPlay(){
        this.autoTimer=setInterval(()=>{
            $(".ck-next").trigger("click");
        },6000)
        //因第一次第一张图展示的是第一个li，所以首先调用一次this.btnShow();
        this.btnShow();
    }
    
     //轮换图按钮
    btnShow(){
        this.btn.each((index)=>{
            if(index == this.index){
             this.btn[this.index].style.background="#fff";
              return false;
            }else{
              this.btn.css("background","rgba(0,0,0,0.1)")
            }
        })
        //除了第一次轮播图的第一张是第一个li以后的每一个都是最后一个li，所以第一个按钮对应最后一个li；
        if(this.index === this.length-1 || this.index === 0){
            this.btn.css("background","rgba(0,0,0,0.1)")
            this.btn[0].style.background="#fff";
        }
    }
    toNext(){
        clearInterval(this.autoTimer);
        if(this.index === this.length-1){
            this.index = 0;
        }else{
            this.index ++;
        }
        this.animate("next");
    }
    toPrev(){
        if(this.index === 0){
            this.index = this.length -1;
        }else{
            this.index --;
        }
        this.animate("prev")
    }
    animate(arg){
        if(this.index === 0 && arg ==="next"){
            this.bannerContainer.css("left",0);
            this.index ++;
        }
        if(this.index === length-1 && arg ==="prev"){
            this.bannerContainer.css("left",(-(this.length - 1) * 720)+"px");
            this.index --;
        }
        move(this.bannerContainer,-this.index*720,"left",this.index);
        this.btnShow();
    }
}
var warp = $(".ck-slide-wrapper");
let slider = new Slider(warp);


